<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>AI Agent</title>
    <style>
        body{width:80%;margin:0 auto}
        *{box-sizing:border-box;margin:0;padding:0}
        body,html{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;display:flex;flex-direction:column;background:#f5f5f5}
        #chat{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}
        .msg{max-width:70%;padding:.6rem .9rem;border-radius:.6rem;line-height:1.4;font-size:.95rem}
        .user{align-self:flex-end;background:#007bff;color:#fff}
        .agent{align-self:flex-start;background:#fff;color:#333}
        #controls{display:flex;gap:.5rem;padding:.5rem;background:#fff;border-bottom:1px solid #ddd}
        #urlSelect{flex:1;padding:.4rem;border:1px solid #ccc;border-radius:4px}
        #userNameInput{width:120px;padding:.4rem;border:1px solid #ccc;border-radius:4px}
        /* 让 Markdown 列表、代码等像样一点 */
        .agent ul{margin-left:1.2em}
        .agent pre{background:#f6f8fa;padding:.5em;border-radius:4px;overflow:auto}
        #form{display:flex;border-top:1px solid #ddd;background:#fff}
        #input{flex:1;border:none;padding:.8rem 1rem;font-size:1rem;outline:none}
        #send{width:80px;border:none;background:#007bff;color:#fff;font-size:1rem;cursor:pointer}
        #send:disabled{background:#aaa;cursor:not-allowed}
    </style>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div id="chat"></div>
<form id="form">
    <input autocomplete="off" id="input" placeholder="输入消息…" required/>
    <div id="controls">
        <select id="urlSelect">
            <option value="/plan">plan</option>
            <option value="/chat">chat</option>
        </select>
        <input id="userNameInput" placeholder="你的名字" type="text"/>
    </div>
    <button id="send">发送</button>
</form>

<script>
    const chat = document.getElementById('chat');
    const form = document.getElementById('form');
    const input = document.getElementById('input');
    const sendBtn = document.getElementById('send');
    const urlSelect = document.getElementById('urlSelect');
    const userNameInput = document.getElementById('userNameInput');

    form.addEventListener('submit', e => {
      e.preventDefault();
      const text = input.value.trim();
      if (!text) return;
      const userName = userNameInput.value.trim() || '匿名';
      append('user', text);
      input.value = '';
      sendBtn.disabled = true;
      const agentEl = append('agent', '');
      let buffer = '';

      fetch(urlSelect.value + '?message=' + encodeURIComponent(text) + '&user=' + encodeURIComponent(userName), {
        method: 'POST'
      })
      .then(res => {
        const reader = res.body.getReader();
        const decoder = new TextDecoder();
        function read() {
          reader.read().then(({ done, value }) => {
            if (done) { sendBtn.disabled = false; return; }
            buffer += decoder.decode(value, { stream: true });
            agentEl.innerHTML = marked.parse(buffer);
            chat.scrollTop = chat.scrollHeight;
            read();
          });
        }
        read();
      })
      .catch(() => {
        agentEl.textContent = '连接失败';
        sendBtn.disabled = false;
      });
    });

    function append(role, txt) {
      const div = document.createElement('div');
      div.className = 'msg ' + role;
      role === 'user' ? div.textContent = txt : div.innerHTML = marked.parse(txt);
      chat.appendChild(div);
      chat.scrollTop = chat.scrollHeight;
      return div;
    }
</script>
</body>
</html>